<template>
  <view class="searchLayout">
    <view class="search">
      <view class="search-box">
        <uni-icons type="search" size="24" color="#999"></uni-icons>
        <input 
          type="text" 
          placeholder="搜索壁纸、分类或标签" 
          disabled
          class="search-input"
        />
        <view class="cancel">取消</view>
      </view>
    </view>
    
    <view class="history">
      <view class="topTitle">
        <view>搜索历史</view>
        <view class="clear" @click="clearHistory">
          <uni-icons type="trash" size="22" color="#999"></uni-icons>
        </view>
      </view>
      
      <view class="tabs">
        <view class="tab" v-for="(item, index) in historyList" :key="index">
          {{ item }}
        </view>
      </view>
    </view>
    
    <view class="recommend">
      <view class="topTitle">推荐标签</view>
      
      <view class="tabs">
        <view class="tab" v-for="(item, index) in recommendList" :key="index">
          {{ item }}
        </view>
      </view>
    </view>
    
    <view class="list">
      <view class="item" v-for="(item, index) in imageList" :key="index">
        <image :src="item.url" mode="aspectFill"></image>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 搜索历史数据
const historyList = ref([
  '景德镇风景',
  '陶瓷大学',
  '青花瓷',
  '千年瓷都'
]);

// 推荐标签数据
const recommendList = ref([
  '自然风光',
  '人文建筑',
  '传统工艺',
  '陶瓷文化',
  '校园生活',
  '城市风光'
]);

// 图片列表数据
const imageList = ref([
  { url: '/static/images/cs1.jpg' },
  { url: '/static/images/fj2.jpg' },
  { url: '/static/images/jz3.jpg' },
  { url: '/static/images/tc4.jpg' },
  { url: '/static/images/ly5.jpg' },
  { url: '/static/images/rw2.jpg' }
]);

// 清空历史记录
const clearHistory = () => {
  historyList.value = [];
};
</script>

<style lang="scss" scoped>
.searchLayout {
  .search {
    padding: 20rpx 30rpx;
    
    .search-box {
      display: flex;
      align-items: center;
      height: 72rpx;
      background-color: #F4F4F4;
      border-radius: 36rpx;
      padding: 0 20rpx;
      
      .search-input {
        flex: 1;
        height: 100%;
        margin-left: 10rpx;
        font-size: 28rpx;
        color: #333;
      }
      
      .cancel {
        width: 120rpx;
        text-align: center;
        font-size: 28rpx;
        color: #367BF0;
      }
    }
  }
  
  .topTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 32rpx;
    color: #999;
    
    .clear {
      padding: 10rpx;
    }
  }
  
  .history {
    padding: 30rpx;
  }
  
  .recommend {
    padding: 30rpx;
  }
  
  .tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 20rpx;
    
    .tab {
      background: #F4F4F4;
      font-size: 28rpx;
      color: #333;
      padding: 10rpx 28rpx;
      border-radius: 50rpx;
      margin-right: 20rpx;
      margin-top: 20rpx;
      white-space: nowrap;
    }
  }
  
  .list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5rpx;
    padding: 20rpx 5rpx;
    
    .item {
      height: 440rpx;
      
      image {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }
    }
  }
}
</style>